<template>
    <div>
        <van-form @submit="onSubmit">
            <div class="form_box">
                <div class="form_item">
                    <div class="title">实习意向</div>
                    <div class="form_item_content">
                        <div class="item_title">期望职位</div>
                        <div class="item_input">
                            <van-field class="input_content" name="jobName" :rules="[{ required: true, message: '' }]"
                                v-model="form.jobName" placeholder="请输入期望职位" />
                        </div>
                    </div>
                    <div class="form_item_content">
                        <div class="item_title">期望行业</div>
                        <div class="item_input">
                            <van-field class="input_content" readonly clickable name="expectedIndustry"
                                :rules="[{ required: true, message: '请填写期望行业' }]" v-model="form.expectedIndustry[0]"
                                placeholder="请选择期望行业" @click="areaDictShowPicker = true" />
                            <van-popup v-model="areaDictShowPicker" position="bottom">
                                <van-picker show-toolbar value-key="label" :columns="areaDict" @confirm="onConfirmAreaDict"
                                    @cancel="areaDictShowPicker = false" />
                            </van-popup>
                            <div class="select_btn">请选择</div>
                        </div>
                    </div>
                    <div class="form_item_content">
                        <div class="item_title">期望城市</div>
                        <div class="item_input">
                            <van-field class="input_content" v-model="form.targetCity" readonly clickable name="targetCity"
                                :rules="[{ required: true, message: '请填写期望城市' }]" placeholder="请选择期望城市"
                                @click="cityShowPicker = true" />
                            <van-popup v-model="cityShowPicker" position="bottom">
                                <van-picker show-toolbar value-key="label" :columns="columns" @confirm="onConfirm"
                                    @cancel="cityShowPicker = false" />
                            </van-popup>
                            <div class="select_btn">请选择</div>
                        </div>
                    </div>
                    <div class="form_item_content">
                        <div class="item_title">薪资要求</div>
                        <div class="item_input last_item">
                            <van-field name="lowestSalary" type="digit"  v-model="form.lowestSalary"
                                :rules="[{ required: true, message: '请输入最低薪资' }, { validator: validatorMone, message: '不能高于最高薪资' }]"
                                class="input_item  input_small" placeholder="最低" />
                            <span class="line">-</span>
                            <van-field name="highestSalary" type="digit"  :rules="[{ required: true, message: '请输入最高薪资' }]" v-model="form.highestSalary" class="input_item input_small"
                                placeholder="最高" />
                            <span class="botom_text">元/天</span>
                        </div>
                    </div>
                </div>

            </div>
            <div style="margin: 1.87rem 0.10rem 0;">
                <van-button class="submmit_btn" round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { provinceAndCityData, AreaOption } from "@/utils/frontDataDict.js";
export default {
    // 组件名称
    name: "demo",
    // 组件参数 接收来自父组件的数据
    props: {
        itemData: {
            type: Object,
            default: () => { }
        }
    },

    // 局部注册的组件
    components: {
    },
    data() {
        return {
            myItemData: this.itemData,
            statusShowPicker: false,
            areaDictShowPicker: false,
            cityShowPicker: false,
            educationShowPicker: false,
            dateShow: false,
            endDateShow: false,
            value: '',
            columns: provinceAndCityData,
            areaDict: AreaOption,
            gradeColumns: [], // 年级

            form: {
                jobName: '',
                targetCity: '',
                expectedIndustry: [],
                lowestSalary: '',
                highestSalary: ''
            }

        }
    },
    created() {

    },
    mounted() {

        this.setForm()
    },
    methods: {
        validatorMone(val) {
            console.log(val, this.form.highestSalary)
            console.log(val < this.form.highestSalary)
            return Number(val) < Number(this.form.highestSalary)
        },
        setForm() {
            setTimeout(() => {
                console.log(this.itemData)
                this.form = this.itemData
                console.log(this.form)
                if (this.itemData.isAdd == 'add') {
                    this.form.expectedIndustry = []
                    return
                }
            });
        },
        onConfirm(val, va, vvv) {
            this.form.targetCity = val[1]
            this.form.cityIndex = va
            console.log(val, va, vvv)
            this.cityShowPicker = false
        },
        onSubmit(val) {
            this.$emit("onItemData", JSON.stringify(this.form))
        },
        onConfirmAreaDict(val, va, vvv) {
            console.log(val, va, vvv)
            this.form.expectedIndustry[0] = val[1]
            this.areaDictShowPicker = false

            console.log(val, va, vvv)
        },

    }
}
</script>

<style lang="less" scoped>
.form_box {
    padding: 0 0.10rem;

    .form_item {
        .title {
            font-size: 0.16rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            margin-top: 0.15rem;
            color: #37383D;
            line-height: 0.22rem;
        }

        .form_item_content {
            .item_title {
                display: flex;
                font-size: 0.14rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                margin-top: 0.11rem;
                color: #37383D;
                line-height: 0.2rem;
                margin-bottom: 0.1rem;

            }

            .item_input {
                display: flex;
                align-items: center;
                margin-bottom: 0.1rem;
                border-bottom: 1px solid #F0F0F0;

                &.last_item {
                    border-bottom: 0;
                }

                .input_content {
                    flex: 1;
                    font-size: 0.13rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #B0B0B0;
                    padding-left: 0;
                    line-height: 0.18rem;
                }

                .select_btn {
                    font-size: 0.13rem;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #2F8EFE;
                    line-height: 0.18rem;

                }

                .input_item {
                    flex: 1;
                    // border: 1px solid #B0B0B0

                }

                .input_small {
                    border-radius: 2px;
                    border: 1px solid #F0F0F0;
                }

                .line {
                    width: 0.20rem;
                    text-align: center;
                }

                .botom_text {
                    margin: 0 0.1rem 0 0.05rem;
                }
            }

        }

    }

}

.show_tast {
    height: 18px;
    text-align: center;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FC9C21;
    line-height: 18px;
    margin-bottom: 0.15rem;
}

/deep/ .van-cell::after {
    border-bottom: 1px solid #ebedf0;
}

.submmit_btn {
    height: 55px;
    background: #3D6CB0;
    border-radius: 5px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 25px;
}</style>
